<template>
  <div
    class="container"
    v-loading="list.length == 0"
    element-loading-text="具映,全面放映..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)"
  >
    <ul class="list">
      <li class="item" v-for="item in list" :key="item.pic" @click="itemClick(item.title)">
        <el-image class="img" :src="item.pic" :fit="objfit"> </el-image>
        <div class="title">{{ item.title }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { ipcRenderer } from "electron";
export default {
  data() {
    return {
      list: [],
      objfit:'cover'
    };
  },
  methods:{
    itemClick(title){
      ipcRenderer.send('videos',title)
    }
  },
  created() {
    console.log(`${new Date()}:[Home]==>[created]`);
    ipcRenderer.send("home:get");
    ipcRenderer.on("home:get", (e, val) => {
      this.list = val;
    });
  },
};
</script>

<style scoped lang="less">
.container {
  height: 100%;
  overflow-y: scroll;
  .list {
    padding: 0 12px;
    .item {
      cursor: pointer;
      position: relative;
      margin-top: 8px;
      border-radius:5px ;
      
      .el-image{
        display: block;
      }
      &:hover{
        box-shadow: 0 0 10px rgba(42, 74, 255, 0.8);
      }
      .el-image {
        width: 100%;
        height: 250px;
      }
      .title {
        padding: 5px 20px;
        background-color: rgba(0, 0, 0, 0.6);
        position: absolute;
        right: 20px;
        bottom: 20px;
        font-size: 26px;
        font-family: appfont;
      }
    }
  }
}
</style>

